<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Capture The Flag - Scoreboard</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
        <script src="Stats.js"></script>
        <script src="viz.js"></script>
        <script>
            $(function() {
                $.ajax('viz.json', {
                    success : function(data) {
                        $(document).trigger('data', data);
                    }
                });
            });
        </script>
        <link type="text/css" rel="stylesheet" href="viz.css"/>
    </head>
    <body>
        <h1>CTF Visualization</h1>
        <div id="speed_indicator">Speed: 1x</div>
        <div class="buttons">
            <fieldset>
                <legend>Run</legend>
                <button id="faster">Faster</button>
                <button id="slower">Slower</button>
                <button id="start">Start</button>
            </fieldset>
        </div>
        <div id="demo_buttons" class="buttons">
            <fieldset>
                <legend>Demo</legend>
                <button id="demo_delivery_success">Successful delivery</button>
                <button id="demo_delivery_failure">Failing delivery</button>
                <button id="demo_check_success">Successful check</button>
                <button id="demo_check_failure">Failing check</button>
                <button id="demo_capture">Capture</button>
            </fieldset>
        </div>
        <canvas id="viz" width="1200" height="800"></canvas>
    </body>
</html>
